<template>
  <a-modal title-align="start" title="终止任务" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="600">
    <div>终止任务，需要经过对方同意，提交终止会将任务移到“协商终止”状态，等待对方确认。</div>
    <a-form :model="form" ref="formRef" auto-label-width>
      <a-form-item label="终止原因" field="terminateReason" :rules="[{ required: true, message: '请选择终止原因' }]">
        <a-select v-model="form.terminateReason" placeholder="请选择">
          <a-option label="任务紧急，等待太久" value="任务紧急，等待太久"></a-option>
          <a-option label="服务太差了" value="服务太差了"></a-option>
          <a-option label="沟通不畅，对方不配合" value="沟通不畅，对方不配合"></a-option>
          <a-option label="其它原因" value="其它原因"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="备注">
        <a-textarea v-model="form.terminateRemark" placeholder="请输入备注" allow-clear />
      </a-form-item>
    </a-form>
    <template #footer class="modal-footer">
      <a-button @click="showvisible = false">取消</a-button>
      <a-button type="primary" :loading="loading" @click="submit">确定</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { defineComponent, ref, computed } from 'vue'
  import { stopTask } from '@/api/task'
  import { Message } from '@arco-design/web-vue'
  let props = defineProps(['modelValue', 'type', 'ids'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })
  const formRef = ref()
  let form: any = ref({})
  let loading = ref(false)
  const submit = async () => {
    const valid = await formRef.value.validate()
    if (valid) return
    let params = {
      ...form.value,
      idList: props.ids,
    }

    loading.value = true
    try {
      const res: any = await stopTask(params)
      if (res) {
        showvisible.value = false
        Message.success('终止成功')
        emits('save')
      }
    } catch (error) {}
    loading.value = false
  }
</script>

<style lang="less" scoped></style>
